<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SSM_Design - </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="//at.alicdn.com/t/font_977780_p6rmctl39h.css" />
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="../plugins/layui/css/layui.css" />

  <style>
    .layui-form {
      margin: 200px auto;
      width: 900px;
    }
  </style>

</head>

<body>

  <div class="mian">
    <form class="layui-form" lay-filter="form">
      <div class="layui-form-item">
        <label class="layui-form-label">课题名称：</label>
        <div class="layui-input-block">
          <input type="text" class="layui-input" name="topic" required="" lay-verify="required" value="" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">课题要求：</label>
        <div class="layui-input-block">
          <textarea name="description" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">课题文件：</label>
        <div class="layui-input-block">
          <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
            <div class="layui-upload-list">
              <table class="layui-table">
                <thead>
                  <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="demoList"></tbody>
              </table>
            </div>
            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center">
        <button id="submit" class="layui-btn" lay-submit lay-filter="submit">提交课题</button>
      </div>
    </form>
  </div>

</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../plugins/layui/layui.js"></script>
<!-- <script src="../js/constant.js"></script> -->
<script>
  layui.use(["layer", "form", "upload"], function () {
    var layer = layui.layer,
      form = layui.form,
      upload = layui.upload;
    var roleType = $.cookie("roleType"),
      roleId = $.cookie("roleId");
    var data = {
      dish_teacherId: roleId
    };
    //多文件列表示例
    var demoListView = $('#demoList'),
      uploadListIns = upload.render({
        elem: '#testList',
        url: 'http://localhost:8080/file/upload',
        accept: 'file',
        exts: "doc|docx|pdf",
        // multiple: true,
        auto: false,
        bindAction: '#testListAction',
        choose: function (obj) {
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function (index, file, result) {
            var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size /
                1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>',
              '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
              '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
              '</td>', '</tr>'
            ].join(''));
            //单个重传
            tr.find('.demo-reload').on('click', function () {
              obj.upload(index, file);
            });
            //删除
            tr.find('.demo-delete').on('click', function () {
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
            });
            demoListView.append(tr);
          });
        },
        done: function (res, index, upload) {
          if (res.isSuccessful) { //上传成功
            var tr = demoListView.find('tr#upload-' + index),
              tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            data.fileName = res.fileName;
            return delete this.files[index]; //删除文件队列已经上传成功的文件
          }
          this.error(index, upload);
        },
        error: function (index, upload) {
          var tr = demoListView.find('tr#upload-' + index),
            tds = tr.children();
          tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
          tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
      });
      form.on("submit(submit)", function (obj) {
        data.topic = obj.field.topic;
        data.description = obj.field.description;
        console.log(data);
        if(!data.fileName) {
          layer.msg("文件不能为空！");
          return;
        }
        $.getJSON("http://localhost:8080/designtopic/addDesigntopic", data)
        .then(function (res) {
          if (res.isSuccessful) {
            layer.msg("提交成功！", { end: function() {window.location.reload();}});
          } else {
            layer.msg("提交失败！");
          }
        })
        return false;
      });
      
  });
</script>

</html>